<template>
	<view class="index f16 b89d" v-if="form.id" @click="outShow = false">
		<u-navbar class="nav" title=" " leftIconColor="#000" leftIconSize="24px" :bgColor="subColor"
			titleStyle="color:#000;font-size:36rpx;" :placeholder="true" safeAreaInsetTop :autoBack="true">
		</u-navbar>
		<view class="tac f20 pt15 top pb80 c0" :style="{background:subColor}">
			{{ form.stateFormat }}
			<view class="f12 mt5">{{form.scoreFormat}}</view>
		</view>
		<view class="page p10" style="position:relative">
			<view class="card mt10 f12" style="font-size:30rpx;color:#999">
				<view class="mb10 wei6 c0">寄存信息</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>寄存门店</text>
					<text>{{form.store && form.store.name}}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>剩余数量</text>
					<text>{{ form.residue }} {{form.drink && form.drink.unit}} {{form.drink && form.drink.name}}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>寄存时间</text>
					<text>{{ form.created_at }}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>寄存数量</text>
					<text>{{ form.num }} {{form.drink && form.drink.unit}} {{form.drink && form.drink.name}}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>过期时间</text>
					<text>{{ form.expiredTimeFormat }}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>联系人</text>
					<text>{{ form.contacts }}</text>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>联系电话</text>
					<text>{{ form.mobile }}</text>
				</view>
			</view>
			<view class="card mt10 f12" style="font-size:30rpx;color:#999">
				<view class="mb10 wei6 c0">订单信息</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>订单编号</text>
					<view>
						<text>{{ form.orderSn }}</text>
						<text :style="{background:subColor}" class="ml5 c0 fz" @click="fz(form.orderSn)">复制</text>
					</view>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>用户信息</text>
					<view v-if="form.user" @click="tocenter(form.user.mobile)">
						<view class="c0">{{form.user.nickname}}<text class="ml5 c9">(ID:{{form.user.id}})</text></view>
						<view class="c9 f-x-e">{{form.user.mobile}}</view>
					</view>
				</view>
				<view class="dfbc p-5-0 f12 c0">
					<text>操作人</text>
					<view v-if="form.admin">
						<view class="c0">{{form.admin.nickname}}</view>
					</view>
				</view>
			</view>
			<view class="card mt10 f12" style="font-size:30rpx;color:#999" v-if="log && log.length">
				<view class="mb10 wei6 c0">寄存记录</view>
			<!-- 	<u-steps :current="0" direction="column" :activeColor="subColor" :inactiveColor="subColor" :dot="true">
					<u-steps-item
						:title="`${v.typeFormat} ${v.num} ${v.drink && v.drink.unit}${v.drink && v.drink.name} 剩余 ${v.residue} ${v.drink && v.drink.unit}${v.drink && v.drink.name}`"
						:desc="`${v.created_at} (操作人:${v.admin && v.admin.nickname})`" v-for="(v,i) in log" :key="i"></u-steps-item>
				</u-steps> -->
			</view>
			<view class="flex bz mt10 bs4 f-y-t" v-if="form.notes">
				<view class="left f10 bs4 mr5 f-g-0">备注</view>
				<view class="f14 wei">{{ form.notes}}</view>
			</view>
		</view>
		<view class="buts dfa tac o-h" :style="{borderColor:subColor}">
			<view class="w100 f16 c0 p10 bf p-r" @click="handOrder('print')">打印订单</view>
			<view class="w100 f16 c0 p10" @click="notesShow = true" :style="{background:subColor}" v-if="form.state==1">
				取出</view>
		</view>
		<u-modal :show="notesShow" :showCancelButton="true" :negativeTop="30" title="取出" cancelText="取消"
			:confirmColor="subColor" @cancel="notesShow=false" @close="notesShow=false" @confirm="notesConfirm">
			<view class="slot-content f-1">
				<u--input v-model="lqnum" placeholder="请输入取出数量" type="number"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import {
		fuzhi,
		callTel,
	} from "@/common/handutil.js";
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				form: {},
				id: '',
				log: [],
				lqnum: '',
				notesShow: false,
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id
				// this.type = options.type
				this.fetchData(options.id)
				this.fetchDataLog(options.id)
			}
		},
		methods: {
			async fetchData(id) {
				let {
					data
				} = await this.beg.request({
					url: `${this.api.dsOrder}/${this.id}`,
					data: {
						// drinksOrderId:id,
						storeId: this.storeId,
					},
				})
				this.form = data
			},
			async fetchDataLog(id) {
				let {
					data: {
						list
					}
				} = await this.beg.request({
					url: `${this.api.dsLog}`,
					data: {
						drinksOrderId: this.id,
						storeId: this.storeId,
					},
				})
				this.log = list ? list : []
			},
			async notesConfirm() {
				if (!this.lqnum) {
					return uni.$u.toast('请输入取出数量')
				}
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.dsLog}`,
					method: "POST",
					data: {
						num: this.lqnum,
						storeId: this.form.storeId,
						userId: this.form.userId,
						drinksId: this.form.drinksId,
						drinksOrderId: this.form.id,
					},
				})
				this.lqnum = ''
				this.fetchData()
				this.fetchDataLog()
				uni.$u.toast(msg)
				this.notesShow = false
			},
			async handOrder(type) {
				let {
					msg
				} = await this.beg.request({
					url: `${this.api.dPrint}/${this.form.id}`,
					method: "POST",
					data: {
						type: 2
					}
				})
				this.fetchData(this.form.id)
				uni.$u.toast(msg)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding-bottom: 160rpx;
		overflow: auto;

		.top {
			width: 100%;
			height: 100px;
			color: #000;
		}

		.buts {
			// background: 'linear-gradient(to right, #fff 50%,'+ subColor+' 50%)'
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 80rpx;
			border-radius: 50rpx;
			border: 2rpx solid #fff;
		}
	}

	.fz {
		padding: 6rpx;
		border-radius: 4rpx;
	}

	.bz {
		background: #FFFBE0;
		padding: 20rpx 10rpx;

		.left {
			padding: 4rpx 8rpx;
			color: #fff;
			background: linear-gradient(to right, #F6AD6D, #F95D40);
		}
	}

	.mumber {
		width: 100rpx;
	}

	.bt1 {
		border-top: 3rpx dotted #e5e5e5;
	}
	
	/deep/ .u-text__value--tips {
	   margin-top: 5px;
	}
</style>